<template>
  <div>
    <h1>Home</h1>
    <div>
      <!-- 
        声明式路由导航，使用router-link组件，其实router-link组件内部也是使用的$router.push进行导航
        所以to属性接受的参数就是push方法接受的location参数
        有时候想要<router-link>渲染成某种标签,良例如<li> 于是我们使用tag prop 类指定何种标签，同样他还是会监听点击，触发导航
        replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
        active-class:设置链接激活时使用的 CSS 类名
       -->
      <router-link active-class="active" to="/home/news" tag="button"
        >新闻</router-link
      >
      <router-link active-class="active" to="/home/music" tag="button"
        >音乐</router-link
      >
      <router-link active-class="active" to="/home/pay" tag="button"
        >娱乐</router-link
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style scoped>
.active {
  background: skyblue;
}
</style>
